{layout "../Layout/layout.latte"}
{block headTitle}排行榜{/block}
{block private_css}
    <style>
        .list-block .item-content{
            min-height:3rem;
        }

        .actions-modal{
            height:550px !important;
            overflow-y:scroll;
        }

        .ranking-ringRatio-green{
            color:green;
        }

        .ranking-ringRatio-red{
            color:red;
        }

        .list-content{
            width:100%; color:#666
        }

        .list-title{
            width:10%;
            float:left;
            text-align:center;
        }

        .item-name{
            width:30%; float:left;
        }

        .item-memo{
            width:30%; float:left;
        }

        .list-after{
            width:30%;
            float:left;
            text-align:right;
        }
    </style>
{/block}
{block tabs_content}
    {include "./rankTabs.latte"}
{/block}
{block private_js}
    <script type="text/javascript">
        $(".acorn-show").click(function () {
            var buttons1 = [
                {
                    text: '今日',
                    onClick: function () {
                        $.showPreloader('加载中...');
                        location.replace({url("mobileConsoles_sort_rankings",array("types"=>$types,"bTypes"=>1))});
                    }
                },
                {
                    text: '昨日',
                    onClick: function () {
                        $.showPreloader('加载中...');
                        location.replace({url("mobileConsoles_sort_rankings",array("types"=>$types,"bTypes"=>2))});
                    }
                },
                {
                    text: '本周',
                    onClick: function () {
                        $.showPreloader('加载中...');
                        location.replace({url("mobileConsoles_sort_rankings",array("types"=>$types,"bTypes"=>3))});
                    }
                },
                {
                    text: '上周',
                    onClick: function () {
                        $.showPreloader('加载中...');
                        location.replace({url("mobileConsoles_sort_rankings",array("types"=>$types,"bTypes"=>4))});
                    }
                },
                {
                    text: '本月',
                    onClick: function () {
                        $.showPreloader('加载中...');
                        location.replace({url("mobileConsoles_sort_rankings",array("types"=>$types,"bTypes"=>5))});
                    }
                },
                {
                    text: '上月',
                    onClick: function () {
                        $.showPreloader('加载中...');
                        location.replace({url("mobileConsoles_sort_rankings",array("types"=>$types,"bTypes"=>6))});
                    }
                },
                {
                    text: '本季',
                    onClick: function () {
                        $.showPreloader('加载中...');
                        location.replace({url("mobileConsoles_sort_rankings",array("types"=>$types,"bTypes"=>7))});
                    }
                },
                {
                    text: '本年',
                    onClick: function () {
                        $.showPreloader('加载中...');
                        location.replace({url("mobileConsoles_sort_rankings",array("types"=>$types,"bTypes"=>8))});
                    }
                },
                {
                    text: '去年',
                    onClick: function () {
                        $.showPreloader('加载中...');
                        location.replace({url("mobileConsoles_sort_rankings",array("types"=>$types,"bTypes"=>9))});
                    }
                },
                {
                    text: '总分榜',
                    onClick: function () {
                        $.showPreloader('加载中...');
                        location.replace({url("mobileConsoles_sort_rankings",array("types"=>$types,"bTypes"=>10))});
                    }
                }
            ];
            var buttons2 = [
                {
                    text: '取消',
                    bg: 'danger'
                }
            ];
            var groups = [buttons1, buttons2];
            $.actions(groups);
        });
    </script>
{/block}
{block content}
    <div class="list-block" style="margin-top: 56px;">
        <ul>
            <li>
                <div class="item-content">
                    <div class="item-inner acorn-show">
                        <div class="item-title" style="color: #24a0ed;">{$title}</div>
                        <div class="item-after"><span class="icon icon-down" style="color: #24a0ed;"></span></div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="list-block" style="margin-top:-1.3rem">
        {if $lists}
            {foreach $lists as $key=>$item}
                <a href="{url('mobileConsoles_sort_detail',array('id'=>$item['userId'],'types'=>$types,"bTypes"=>$bTypes))}">
                    <ul class="list">
                        <li>
                            <div class="list-content">
                                <div class="list-title">
                                    {if $key+1==1}
                                        <i class="icon al-icon al-icon-diyi sui-font-size-rem-1-5" style="color:red"></i>
                                    {elseif $key+1==2}
                                        <i class="icon al-icon al-icon-dier sui-font-size-rem-1-5" style="color:#f60"></i>
                                    {elseif $key+1==3}
                                        <i class="icon al-icon al-icon-disan sui-font-size-rem-1-5" style="color:#73f0b8"></i>
                                    {elseif $key+1>=4}
                                        <span style="text-align:center;font-size: 16px;">{$key+1}</span>
                                    {/if}
                                </div>
                                <div class="item-name sui-ellipsis-1">{$item['userName']?$item['userName']:$item['names']}</div>
                                {if $bTypes<10}
                                    <div class="item-memo sui-ellipsis-1">{$item['acorn']}<i class="icon al-icon al-icon-influence sui-font-size-rem-0-8"></i></div>
                                    <div class="list-after">
                                        {if $item['ratioTypes']==1}
                                            {$item['ringRatio']}%
                                            <i class="icon al-icon al-icon-shangsheng1 ranking-ringRatio-green" style="margin-left: 5px;"></i>
                                        {elseif $item['ratioTypes']==2}
                                            {$item['ringRatio']}%
                                            <i class="icon al-icon al-icon-xiajaing ranking-ringRatio-red" style="margin-left: 5px;"></i>
                                        {else}
                                            --
                                        {/if}
                                    </div>
                                {else}
                                    <div class="sui-ellipsis-1" style="text-align: right;">{$item['acorn']}<i class="icon al-icon al-icon-influence sui-font-size-rem-0-8"></i></div>
                                {/if}
                            </div>
                        </li>
                    </ul>
                </a>
            {/foreach}
        {else}
            <div style="margin-top:50px;margin-bottom:30px;text-align:center">
                <img src="{path('[MobileConsoles]/img/null.png')}" alt="" class="" style="width:60%; height:100%; margin: 0 20%; display:block;">
                <div style="color:#999;">暂无排行</div>
            </div>
        {/if}
    </div>
{/block}